<template name="tab-bar">
	<view class="tabList">
		<view class="tabItem" v-for="(item,index) in tabBarList" @click="changeTab(index)">
			<image v-if="index==active" class="tabImg" :src="item.selected_icon"/>
			<image v-else class="tabImg" :src="item.un_selected_icon"/>
			<view :class="active==index?'tabText active':'tabText'">{{item.name}}</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "tab-bar",
		props: {
			active:{
				type:Number,
				default:0
			},
			tabBarList:{
				type:Array,
				default:[]
			},
		},
		data() {
			return {
			}
		},
		methods: {
			
			changeTab(index){
				switch(index){
					case 0:{
						uni.switchTab({
							url: '/pages/index/index'
						});
						break;
					}
					case 1:{
						uni.switchTab({
							url: '/pages/mall/index'
						});
						break;
					}
					case 2:{
						uni.switchTab({
							url: '/pages/case/index'
						});
						break;
					}
					case 3:{
						uni.switchTab({
							url: '/pages/car/index'
						});
						break;
					}
					case 4:{
						uni.switchTab({
							url: '/pages/mine/index'
						});
						break;
					}
				}
			},
		}
	}
</script>
<style>
	.tabList{
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		padding: 12rpx 0;
		width: 100%;
		background-color: #fff;
		border-top: solid 1rpx rgba(0,0,0,0.05);
		display: flex;
	}
	.tabItem{
		flex: 1;
		text-align: center;
	}
	.tabImg{
		width: 52rpx;
		height: 52rpx;
		vertical-align: bottom;
	}
	.tabText{
		font-size: 24rpx;
		color:#333;
	}
	.tabText.active{
		color: #2b6abd;
	}
</style>
